<template>
  <div>
    <MyTable :data="list">
      <!-- 使用作用域插槽，自定义某一个列 -->
      <template #default="{ row }">
        <span
          :style="{
            padding: '5px',
            color: row.tag === 'Home' ? '#409eff' : '#87cf63',
            border: '1px solid gray',
            borderColor: row.tag === 'Home' ? '#409eff' : '#87cf63'
          }"
          >{{ row.tag }}</span
        >
      </template>
    </MyTable>
  </div>
</template>

<script setup lang="ts">
import MyTable from './MyTable.vue'
import { ref } from 'vue'
const list = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Home'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    tag: 'Office'
  }
])
</script>
